<template>
    <div class="container">
        <div>
            <p>{{ obj.name }}</p>
            <p>{{ obj.age }}</p>
            <p>{{ obj.brand.name }}</p>
            <button @click="updateName">改名字</button>
            <button @click="updateBrandName">改品牌名字</button>
        </div>
    </div>
</template>
<script>
import { reactive, ref, watch } from 'vue'
export default {
    name: 'App',
    setup() {

        const obj = reactive({
            name: 'ls',
            age: 10,
            brand: {
                id: 1,
                name: '宝马'
            }
        })
        const updateName = () => {
            obj.name = 'zs'
        }
        const updateBrandName = () => {
            obj.brand.name = '奔驰'
        }
        // 2. 监听一个reactive数据
        watch(obj, () => {
            console.log('数据改变了')
        })

        watch(() => obj.brand, () => {
            console.log('brand数据改变了')
        }, {
            // 5. 需要深度监听
            deep: true,
            // 6. 想默认触发
            immediate: true
        })


        return { obj, updateName, updateBrandName }
    }
}
</script>